import Taro, {Component} from "@tarojs/taro";
import {View, ScrollView, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, typeOfJobArr, pageSize, typeOfJob} from '../../utils/common'

import './personnel_center.less'

// 工程人才中心
interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    allProvince: [], // 省
    provinceId: null,
    allTechnicalTitle: [], // 职称
    technicalTitleId: null, // 职称
    allMajorCategory: [], // 专业类别
    majorCategoryId: null, // 专业类别
    typeOfJobArr, // 工作类型
    typeOfJobId: null,
    currentNavId: 0,
    pageIndex: 1,
    pageSize,
    totalCount: 0,
    items: []
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'工程人才中心' })
    this.getAllProvince()
    this.getAllTechnicalTitle()
    this.getAllMajorCategory()
    this.getDate()
  }

  // 获取页面数据-人才库信息
  getAllResumeInfo() {
    let {TalentStore} = this.props.stores
    let {provinceId, typeOfJobId, pageIndex, pageSize, technicalTitleId, majorCategoryId} = this.state
    TalentStore.getAllResumeInfo({
      formMajorCategoryId: majorCategoryId,
      formTechnicalTitleId: technicalTitleId,
      formProvinceId: provinceId,
      formTypeOfJob: typeOfJobId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({
            totalCount: toJS(res.totalCount),
            items: toJS(res.items)
          })
        } else {
          const {items} = this.state;
          items.push(...res.items || []);
          this.setState({
            totalCount: res.totalCount,
            items
          })
        }
      }
    })
  }

  // 获取页面数据-简历库信息
  getAllRecruitInfo() {
    let {TalentStore} = this.props.stores
    let {provinceId, typeOfJobId, pageIndex, pageSize} = this.state
    TalentStore.getAllRecruitInfo({
      formProvinceId: provinceId,
      formTypeOfJob: typeOfJobId,
      pageIndex,
      pageSize,
      callback: res => {
        console.log(res)
        if (pageIndex === 1) {
          this.setState({
            totalCount: toJS(res.totalCount),
            items: toJS(res.items)
          }, () => {
            // 职位详情页使用
            getRuntime().setStorage('positionInfo', this.state.items)
          })
        } else {
          const {items} = this.state;
          items.push(...res.items || []);
          this.setState({
            totalCount: res.totalCount,
            items
          }, () => {
            // 职位详情页使用
            getRuntime().setStorage('positionInfo', this.state.items)
          })
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.TalentStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllResumeInfo()
      })
    }
  }

  getAllProvince() {
    let {AreaStore} = this.props.stores
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        this.setState({
          allProvince: res
        }, () => {
        })
      }
    })
  }

  // 获取职称
  getAllTechnicalTitle() {
    let {TalentStore} = this.props.stores
    TalentStore.getAllTechnicalTitle({
      callback: res => {
        // console.log(res)
        this.setState({
          allTechnicalTitle: toJS(res.items)
        })
      }
    })
  }

  // 获取专业类别
  getAllMajorCategory() {
    let {TalentStore} = this.props.stores
    TalentStore.getAllMajorCategory({
      callback: res => {
        // console.log(res)
        this.setState({
          allMajorCategory: toJS(res.items)
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  handelUpgrade(url: string = '/pages/index/index'): void {
    if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    getRuntime().navigateTo(url)
  }

  changeNav(currentNavId: number) {
    this.setState({
      currentNavId,
      items: [],
      pageIndex: 1,
    }, () => {
      this.getDate()
    })
  }

  getDate() {
    if (this.state.currentNavId === 0) {
      this.getAllResumeInfo()
    } else {
      this.getAllRecruitInfo()
    }
  }

  changeTechnicalTitleId(id: number) {
    this.setState({technicalTitleId: id}, () => this.getDate())
  }

  changeProvinceId(id: number) {
    this.setState({provinceId: id}, () => this.getDate())
  }

  changeMajorCategoryId(id: number) {
    this.setState({majorCategoryId: id}, () => this.getDate())
  }

  changeTypeOfJobId(id: number) {
    this.setState({typeOfJobId: id}, () => this.getDate())
  }

  render() {
    let {currentNavId, allTechnicalTitle, technicalTitleId, allProvince, provinceId, allMajorCategory, majorCategoryId, typeOfJobArr, typeOfJobId, items} = this.state
    console.log(items)
    return (
      <View className='personnel-index'>
        <ScrollView className='scroll-view-nav' scrollX={true}>
          <View className={currentNavId === 0 ? 'scroll-item scroll-item-on' : 'scroll-item'}
                onClick={this.changeNav.bind(this, 0)}>人才库<Text className='line'/></View>
          <View className={currentNavId === 1 ? 'scroll-item scroll-item-on' : 'scroll-item'}
                onClick={this.changeNav.bind(this, 1)}>招聘信息<Text className='line'/></View>
        </ScrollView>

        <View className='interval'/>

        <View className='select-option'>
          {/*职称*/}
          {
            allTechnicalTitle.length>0&&
          <View className='option-item'>
            <View className={!technicalTitleId ? 'option all option-active' : 'option all'}
                  onClick={this.changeTechnicalTitleId.bind(this, null)}>全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
            >
              {
                allTechnicalTitle.map(item => {
                  return (
                    <View className={technicalTitleId === item.id ? 'option option-active' : 'option'} key={item.id}
                          onClick={this.changeTechnicalTitleId.bind(this, item.id)}>{item.titleName}</View>
                  )
                })
              }
            </ScrollView>
          </View>
          }
          {/*省份*/}
          <View className='option-item'>
            <View className={!provinceId ? 'option all option-active' : 'option all'}
                  onClick={this.changeProvinceId.bind(this, null)}>全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
            >
              {
                allProvince.map(item => {
                  return (
                    <View className={provinceId === item.value ? 'option option-active' : 'option'} key={item.value}
                          onClick={this.changeProvinceId.bind(this, item.value)}>{item.label}</View>
                  )
                })
              }
            </ScrollView>
          </View>
          {/*专业类别*/}
          {allMajorCategory.length>0&&
          <View className='option-item'>
            <View className={!majorCategoryId ? 'option all option-active' : 'option all'}
                  onClick={this.changeMajorCategoryId.bind(this, null)}>全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
            >
              {
                allMajorCategory.map(item => {
                  return (
                    <View className={majorCategoryId === item.id ? 'option option-active' : 'option'} key={item.id}
                          onClick={this.changeMajorCategoryId.bind(this, item.id)}>{item.majorCateName}</View>
                  )
                })
              }
            </ScrollView>
          </View>
          }
          {/*工作类型*/}
          {
            typeOfJobArr.length > 0 &&
            <View className='option-item'>
               <View className={!typeOfJobId ? 'option all option-active' : 'option all'}
                     onClick={this.changeTypeOfJobId.bind(this, null)}>全部</View>
               <ScrollView
                   className='scrollview'
                   scrollX
                   scrollWithAnimation
               >
                 {
                   typeOfJobArr.map((item, index) => {
                     return (
                       <View className={typeOfJobId === index + 1 ? 'option option-active' : 'option'} key={index}
                             onClick={this.changeTypeOfJobId.bind(this, index + 1)}>{item}</View>
                     )
                   })
                 }
               </ScrollView>
            </View>
          }
        </View>

        <View className='interval' />

        <View className='list-06'>
          {
            items.length > 0 &&
            items.map(item => {
              let tpl = null
              switch (item.publicationType) {
                case 3: { // 职位
                  tpl = <View className='list-06-item'>
                    <View className='item-title'>
                      <View className='title'>
                        {item.positionName}
                        <Text className='label'>{item.jobNature}</Text>
                      </View>
                      <View className='address'>{item.address}</View>
                    </View>
                    <View className='item-info'>
                      <View className='info'>
                        <Text className='op i'>{item.monthlyPay}</Text>
                        <Text className='i'>{item.education}</Text>
                        <Text className='i'>{item.recruitment}人</Text>
                        <Text className='i brnone'>{item.technicalTitle}</Text>
                      </View>
                      <View className='btn-view'
                            onClick={this.handelRouter.bind(this, '/pages/newest/position_detail?id=' + item.id)}>
                        查看
                      </View>
                    </View>
                  </View>
                  break
                }
                case 4: { // 人才
                  tpl =
                    <View className='list-06-item'>
                      <View className='item-title'>
                        <View className='title'>
                          {item.positionName}
                          <Text className='label'>{typeOfJob(item.typeOfJob)}</Text>
                        </View>
                      </View>
                      <View className='item-info'>
                        <View className='info'>
                          <Text className='i'>{item.education}</Text>
                          <Text className='i'>{item.technicalTitle}</Text>
                          <Text className='i brnone'>{item.workYears}</Text>
                        </View>
                        <View className='btn-view'
                              onClick={this.handelRouter.bind(this, '/pages/newest/personnel_detail?id=' + item.id)}>
                          查看
                        </View>
                      </View>
                    </View>
                  break
                }
              }
              return tpl
            })
          }
          {
            items.length <= 0 && <View className='page-none-info'>没有相关信息...</View>
          }
        </View>

        <View className='footer-block'/>

        <View className='footer-personnel'>
          <View className='btn btn1' onClick={this.handelUpgrade.bind(this, '/pages/index/position')}>发布职位</View>
          <View className='btn btn2' onClick={this.handelUpgrade.bind(this, '/pages/index/rresume')}>填写简历</View>
        </View>
      </View>
    )
  }
}

export default Personnel
